<template>
  <div class="pano_nav">
    <div class="pano_nav_top ">
      <div style="width: 500px;display: table-cell">
        <div class="nav_router">
          <div class="nav_router_item" v-for="(item,index) in navList" :class="{hover: index === page}" @click="pushRouter(index)">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="nav_router_des">
        <div>
          统计周期：{{StatisticsTime.startTime}}~{{StatisticsTime.endTime}}（共{{StatisticsTime.duringTime}}天）
        </div>
      </div>
      <div class="nav_router_button ">

        <div class="router_button_item right"  @click="loop_left">
          <i class="iconfont icon-triangle-right"></i>
        </div>
        <div class="router_button_item right" style="transform: rotateY(180deg);" @click="loop_right">
          <i class="iconfont icon-triangle-right"></i>
        </div>
        <div class="router_button_item right" @click="ShowInfo" :class="{transform_r: isShowInfo }">
          <i class="iconfont icon-triangle-down"  ></i>
        </div>
        <zz-check
          checkTip="自动轮播"
          :check="isAutoLoop"
          @handleChange="handleChange"
          class="right mr10"
          tipColor="#01a9af"
        ></zz-check>
      </div>
    </div>
    <div class="pano_nav_info relative"  ref="pano_nav_info" :style="{height:`${208}px`}"

    >
        <!--<transition-group-->
          <!--name="loop_chart"-->
          <!--mode="out-in"-->
          <!--tag="div"-->
        <!--&gt;-->
          <!--<div class="loop_item" :style="{width:`${innerWidth}px`,height:'100%'}"  :key="0" v-show=" 0 === page ">-->
            <!--<labor_monitor class="left"></labor_monitor>-->
            <!--<enterLabor  class="left"  :style="{margin:` 0 ${innerWidth * .005}px`}"></enterLabor>-->
            <!--<labor class="right"></labor>-->
          <!--</div>-->
          <!--<div  class="loop_item" :style="{width:`${innerWidth}px`,height:'100%'}" :key="1" v-show=" 1 === page ">-->
            <!--<tower_monitor class="left"></tower_monitor>-->
            <!--<elevator_monitor class="left" :style="{margin:` 0 ${innerWidth * .005}px`}"></elevator_monitor>-->
            <!--<online_device class="right" ></online_device>-->
          <!--</div>-->
          <!--<div class="loop_item" :style="{width:`${innerWidth}px`,height:'100%'}" :key="2" v-show=" 2 === page  ">-->
              <!--<WiFi_education class="left" ></WiFi_education>-->
              <!--<device_inspect class="left" :style="{margin:` 0 ${innerWidth * .005}px`}" ></device_inspect>-->
              <!--<pano_weather class="right" ></pano_weather>-->
          <!--</div>-->
          <!--<div class="loop_item" :style="{width:`${innerWidth}px`,height:'100%'}" :key="3" v-if=" 3 === page ">-->
            <!--<pano_weather class="left" ></pano_weather>-->
          <!--</div>-->
        <!--</transition-group>-->
        <div class="pano_container" :class="{pano_container_transtion:!isAutoLoop}" :style="{width:`${innerWidth * 4}px`,transform:`translateX(${-moveDistance}px)`}" ref="nav_info_container" >
          <labor_monitor class="left" :style="{marginRight:`${innerWidth * .005}px`}"></labor_monitor>
          <enterLabor  class="left"  :style="{marginRight:`${innerWidth * .005}px`}"></enterLabor>
          <labor class="left" :style="{marginRight:`${innerWidth * .005}px`}"></labor>
          <tower_monitor class="left" :style="{marginRight:`${innerWidth * .005}px`}"></tower_monitor>
          <elevator_monitor class="left" :style="{marginRight:`${innerWidth * .005}px`}"></elevator_monitor>
          <online_device class="left" :style="{marginRight:`${innerWidth * .005}px`}"></online_device>
          <WiFi_education class="left" :style="{marginRight:`${innerWidth * .005}px`}"></WiFi_education>
          <device_inspect class="left" :style="{marginRight:`${innerWidth * .005}px`}" ></device_inspect>
          <pano_weather class="left" :style="{marginRight:`${innerWidth * .005}px`}"></pano_weather>
        </div>
      </div>
    </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'loop',
    mixins: [mixin],
    data () {
      return {
        navList: [
          {name: '人员投入', hover: true, router: ''},
          {name: '设备投入', hover: false, router: ''},
          {name: '安全文明管理', hover: false, router: ''},
          {name: '天气情况', hover: false, router: ''}
        ],
        isShowInfo: false,
        page: 0,
        StatisticsTime: {
          startTime: 0,
          endTime: 0,
          duringTime: 0
        },
        isTrue: true,
        timer: null,
        interTimer: null,
        moveTime: null,
        moveDistance: 0,
        isAutoLoop: true,
        isStart: false
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid) {
          this.getStatisticsTime()
        }
      }
    },
    components: {
      labor (resolve) {
        require(['./labor/labor.vue'], resolve)
      },
      enterLabor (resolve) {
        require(['./labor/enterLabor.vue'], resolve)
      },
      labor_monitor (resolve) {
        require(['./labor/labor_monitor.vue'], resolve)
      },
      online_device (resolve) {
        require(['./labor/online_device.vue'], resolve)
      },
      tower_monitor (resolve) {
        require(['./labor/tower_monitor.vue'], resolve)
      },
      elevator_monitor (resolve) {
        require(['./labor/elevator_monitor.vue'], resolve)
      },
      WiFi_education (resolve) {
        require(['./labor/WiFi_education.vue'], resolve)
      },
      device_inspect (resolve) {
        require(['./labor/device_inspect.vue'], resolve)
      },
      pano_weather (resolve) {
        require(['./labor/pano_weather.vue'], resolve)
      }
    },
    mounted () {
      this.getStatisticsTime()
      setTimeout(() => {
        this.moveContainer()
        this.isStart = true
      }, 1000)
    },
    methods: {
      handleChange () {
        this.isAutoLoop = !this.isAutoLoop
        if (this.isAutoLoop) {
          this.moveContainer()
        } else {
          clearInterval(this.moveTime)
          this.moveTime = null
        }
      },
      moveContainer () {
        if (!this.moveTime) {
          this.moveTime = setInterval(() => {
            this.moveDistance++
            if (this.moveDistance > this.innerWidth * 3.3) {
              this.moveDistance = -this.innerWidth
            }
            this.DistanceMove()
          }, 10)
        }
      },
      DistanceMove () {
        if (this.moveDistance > this.innerWidth * 3.3 || this.moveDistance < this.innerWidth) {
          this.page = 0
        }
        if (this.innerWidth * 2 <= this.moveDistance && this.moveDistance < this.innerWidth * 2.64) {
          this.page = 2
        }
        if (this.innerWidth * 2.64 <= this.moveDistance && this.moveDistance < this.innerWidth * 3.3) {
          this.page = 3
        }
        if (this.innerWidth <= this.moveDistance && this.moveDistance < this.innerWidth * 2) {
          this.page = 1
        }
      },
      pageMove () {
        if (this.page === 0) {
          this.moveDistance = 1
        } else if (this.page === 1) {
          this.moveDistance = this.innerWidth + 1
        } else if (this.page === 2) {
          this.moveDistance = this.innerWidth * 2 + 1
        } else if (this.page === 3) {
          this.moveDistance = this.innerWidth * 2.64 + 1
        }
      },
      getStatisticsTime () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getPanoramaCycleTime`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (res.data.success) {
            if (!res.data.data || res.data.data.length === 0) {
              this.StatisticsTime.startTime = 0
              this.StatisticsTime.endTime = 0
              this.StatisticsTime.duringTime = 0
              return
            }
            let data = res.data.data
            this.StatisticsTime.startTime = this.$moment(data[0]).format('ll')
            this.StatisticsTime.endTime = this.$moment(data[1]).format('ll')
            this.StatisticsTime.duringTime = data[2]
          } else {
            this.$message.error('获取失败')
          }
        })
      },
      pushRouter (item) {
        if (!this.isStart) return
        clearTimeout(this.moveTime)
        this.moveTime = null
        this.isAutoLoop = false
        this.page = item
        this.pageMove()
      },
      ShowInfo () {
        this.isShowInfo = !this.isShowInfo
        if (!this.isShowInfo) {
          // this.$refs.pano_nav_info.style.height = this.contentHeight * 0.22 + 'px'
          this.$refs.pano_nav_info.style.height = '210px'
          this.moveContainer()
          this.isAutoLoop = true
        } else {
          this.$refs.pano_nav_info.style.height = '0px'
          clearInterval(this.moveTime)
          this.isAutoLoop = false
        }
      },
      loop_left () {
        if (!this.isStart) return
        clearTimeout(this.moveTime)
        this.isAutoLoop = false
        if (this.isTrue) {
          this.isTrue = false
          this.page++
          if (this.page > 3) {
            this.page = 3
          }
          this.pageMove()
        }
        this.timer = setTimeout(() => {
          this.isTrue = true
        }, 500)
      },
      loop_right () {
        if (!this.isStart) return
        clearTimeout(this.moveTime)
        this.isAutoLoop = false
        if (this.isTrue) {
          this.isTrue = false
          this.page--
          if (this.page < 0) {
            this.page = 0
          }
          this.pageMove()
        }
        this.timer = setTimeout(() => {
          this.isTrue = true
        }, 500)
      }
    }
  }
</script>

<style scoped lang="scss">
  .pano_nav {
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    bottom: 0px;
    width: 100%;
    .pano_nav_top {
      display: table;
      width: 100%;
      .nav_router {
        width: 500px;
        height: 70px;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        .nav_router_item {
          // width: 115px;
          color: #f2f2f2;
          text-align: center;
          cursor: pointer;
          padding: 10px 24px;
          margin-right: 5px;
          box-sizing: border-box;
          float: left;
          margin-top: 16px;
          &:hover {
            background-color: #0f9697;
          }
          &.hover {
            background-color: #0f9697;
          }
        }
      }
      .nav_router_des {
        display: table-cell;
        vertical-align: top;
        text-align: center;
        color: #c6d5e7;
        font-size: 20px;
        line-height: 70px;
      }
      .nav_router_button {
        display: table-cell;
        width: 500px;
        vertical-align: middle;
        .router_button_item {
          width: 25px;
          height: 25px;
          border: 1px solid #01a9af;
          background-color: transparent;
          color: #01a9af;
          box-sizing: border-box;
          text-align: center;
          line-height: 25px;
          margin-right: 10px;
          cursor: pointer;
          &.transform_r {
            transform: rotate(180deg);
          }
          &:hover {
            color: #fff;
            background-color: #01a9af;
          }
        }
      }
    }
    .pano_nav_info {
      overflow: hidden;
      transition: height 1s;
      .pano_container {
        height: 100%;
        &.pano_container_transtion {
          transition: all 1s;
        }
      }
      .loop_item{
        position: absolute;
      }
    }
  }
  .loop_chart-enter-to {
    transition: all 5s ease;
    transform: translateX(0);
  }

  .loop_chart-leave-active {
    transition: all 5s ease;
    transform: translateX(-100%)
  }

  .loop_chart-enter {
    transform: translateX(100%)
  }

  .loop_chart-leave {
    transform: translateX(0)
  }

</style>
